<template>
  <div>
    御剑乘风来,除魔天地间!
    <ul>
      <li>
        <router-link to="/Rt/5566/李雪虎?id=query&name=李雪虎"
          >routerlink的/传参1</router-link
        >
      </li>
      <li>
        <router-link
          :to="{
            name: 'Rt',
            query: {
              id: '111',
              name: '李雪虎',
            },
            params: {
              id: '222',
              name: '王子谦',
            },
          }"
          >routerlink的/传参2</router-link
        >
      </li>
      <li>
        <!--通过对象格式进行传参的时候可以直接写params和query,不需要配置index.js的path的: -->
        <!-- 同时,如果使用params传参则无法使用path匹配而应该使用name进行匹配 -->
        <router-link
          :to="{
            name: 'Rt',
            params: {
              id: '111',
              name: '李雪虎',
            },
            query: {
              id: '222',
              name: '王子谦',
            },
          }"
          >routerlink的/传参3</router-link
        >
      </li>
      <button @click="fn">跳转routerlink页面</button>
      <li><router-link to="/1">bbb/home</router-link></li>
      <li><router-link to="/PageHospital1">vvv</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      name: "13",
    };
  },
  created() {
    //     console.log(this.$route.query);
  },
  computed: {},
  methods: {
    fn() {
      // this.$router.push('/Rt')
      //       if (this.$route.name === "Rt") {
      //         return console.log(123);
      //       }
      console.log(this)
      this.$router
        .push({
          name: "Rt1",
          params: {
            id: "111",
            name: "李雪虎",
          },
          query: {
            id: "222",
            name: "王子谦",
          },
        })
        .catch((err) => {
        //   console.log(err);
        });
    },
  },
  watch: {
    $route: {
      deep: true,
      handler() {
        console.log(this.$route.path, 222);
      },
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
